<template>
    <div>
    <el-dialog
    top="5vh"
    :title="title"
    :visible.sync="visible"
    :width="width + 'px'"
    :before-close="onClose"
:close-on-click-modal="false"
>
<div class="container" :style="{height:height+'px'}">
<slot name="content"></slot>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="onClose">取 消</el-button>
<el-button type="primary" @click="onConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "标题",
},
visible: {
type: Boolean,
default: false,
},
width: {
type: Number,
default: 600,
},
height: {
type: Number,
default: 250,
},
},
data() {
return {};
},
methods: {
onClose() {
this.$emit("onClose");
},
onConfirm() {
this.$emit("onConfirm");
},
},
};
</script>
<style lang="scss" scoped>
.container{
overflow-x: initial;
overflow-y: auto;
}
.el-dialog__wrapper {
::v-deep .el-dialog {
border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
.el-dialog__header {
    border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
background-color: #1890ff;
.el-dialog__title {
color: #fff;
font-size: 15px;
font-weight: 700;
}
.el-dialog__close {
color: #fff;
}
}
.el-dialog__body {
padding: 10px 10px !important;
}
.el-dialog__footer {
border-top: 1px solid #e8eaec !important;
padding: 10px !important;
}
}
}
</style>